<template>
  <div style="width: 100%">
    <slot name="dialogSlot">
      <el-input
        v-model="inputValue"
        class="input-with-select"
        clearable
        :disabled="disabledSel"
        :placeholder="placeholderRef"
        readonly
        :style="{ width: inputWithRef || '' }"
        @clear="clearInput"
        @dblclick="handleShow"
      >
        <template #suffix>
          <vab-icon icon="close-circle-line" @click="clearInput" />
        </template>
        <template #append>
          <el-button :icon="Search" @click="handleShow" />
        </template>
      </el-input>
    </slot>
  </div>
  <vab-dialog
    v-model="dialogFormVisible"
    :append-to-body="appendToBodyVal"
    :before-close="handleClose"
    :close-on-click-modal="true"
    show-fullscreen
    :title="titleRef"
    :width="width"
  >
    <div>
      <CommonSearch
        ref="searchRef"
        v-model="queryFormRef"
        v-model:isLoading="tableDataRef.isLoading"
        :search-data="searchDataRef"
        @fetched-data="fetchListData"
      />
      <CommonTableV2
        v-model="tableDataRef.datalist"
        v-model:isLoading="tableDataRef.isLoading"
        v-model:query-form="queryFormRef"
        v-model:select-valule="selectValue"
        v-model:selection-values="searchDataRef.selectionIds"
        :table-data="tableDataRef"
        @on-handle-db-cell-click="onHandleDBRowClick"
      >
        <template #opreration>
          <vxe-column fixed="right" title="操作" width="180">
            <template #default="{ row }">
              <el-button size="small" type="primary" @click="onHandleSelect(row)"> 选择 </el-button>
            </template>
          </vxe-column>
        </template>
      </CommonTableV2>
    </div>
    <!-- <template #footer>
      <div style="position: relative; padding-right: 15px; text-align: right">
        <el-button :loading="loading" type="success" @click="handleConfirm">
          确认
        </el-button>
        <el-button type="info" @click="handleClose">关闭</el-button>
      </div>
    </template> -->
  </vab-dialog>
</template>

<script>
import VabDialog from "@/plugins/VabDialog/index.vue";
import { Search } from "@element-plus/icons-vue";
import { postRequest } from "@/api/mains";
import CommonTableV2 from "@/plugins/tableV2/CommonTableV2.vue";
import CommonSearch from "@/plugins/search/CommonSearch.vue";

export default {
  name: "DialogListOne",
  components: { VabDialog, CommonTableV2, CommonSearch },
  props: {
    modelValue: {
      type: [Number, String],
      default: ""
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "请选择"
    },
    placeholder: {
      type: String,
      default: () => {
        return "请选择";
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    inputWidth: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "50%"
    },
    showField: {
      type: String,
      default: "name"
    },
    showValue: {
      type: String,
      default: ""
    },
    searchData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    tableData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    queryForm: {
      type: Object,
      default: () => {
        return {};
      }
    },
    rowIndex: {
      type: Number,
      default: 0
    }
  },
  emits: {
    "callback-select": null,
    "update:model-value": null,
    "update:show-value": null
  },
  setup(props, { emit }) {
    const disabledSel = ref(props.disabled);
    const showFieldRef = ref(props.showField);
    const selectValue = ref(props.modelValue);
    const rowIndexRef = ref(props.rowIndex);
    const inputValue = ref(props.showValue);
    const inputWithRef = ref(props.inputWidth);

    const titleRef = ref(props.title);
    const placeholderRef = ref(props.placeholder);
    const dialogFormVisible = ref();

    const queryFormRef = ref(props.queryForm);
    queryFormRef.value.pageNum = 1;
    queryFormRef.value.pageSize = 10;

    const tableDataRef = reactive(props.tableData);

    const searchDataRef = reactive(props.searchData);

    const appendToBodyVal = ref(props.appendToBody);

    const handleShow = () => {
      if (!disabledSel.value) {
        dialogFormVisible.value = true;
        fetchListData();
      }
    };
    const handleClose = () => {
      dialogFormVisible.value = false;
    };

    const clearInput = () => {
      if (!disabledSel.value) {
        inputValue.value = "";
        selectValue.value = "";
        emit("update:model-value", "");
        emit("update:show-value", "");
        emit("callback-select", {}, rowIndexRef);
      }
    };

    const fetchListData = () => {
      tableDataRef.isLoading = true;
      postRequest(searchDataRef.queryUrl, queryFormRef.value).then(res => {
        tableDataRef.isLoading = false;
        const { data } = res;
        tableDataRef.datalist = data.rows;
        tableDataRef.total = data.total;
      });
    };

    const onHandleSelect = row => {
      inputValue.value = row[showFieldRef.value];
      selectValue.value = row.id;
      emit("update:model-value", row.id);
      emit("update:show-value", row[props.showField]);
      emit("callback-select", row, rowIndexRef);
      handleClose();
    };

    const onHandleDBRowClick = ({ row }) => {
      onHandleSelect(row);
    };

    onMounted(() => {
      if (!tableDataRef.isInitData) {
        fetchListData();
      }
    });

    watch(
      () => props.showValue,
      newVal => {
        inputValue.value = newVal;
      }
    );

    return {
      disabledSel,
      showFieldRef,
      selectValue,
      rowIndexRef,
      inputValue,
      titleRef,
      inputWithRef,
      placeholderRef,
      appendToBodyVal,
      dialogFormVisible,
      handleShow,
      handleClose,
      clearInput,
      fetchListData,
      onHandleDBRowClick,
      queryFormRef,
      tableDataRef,
      searchDataRef,
      onHandleSelect,
      Search
    };
  }
};
</script>

<style lang="scss" scoped>
:deep(.vxe-table--body) {
  .vxe-body--column {
    background-image: none;
  }
}
:deep(.vxe-table) {
  .vxe-table--border-line {
    border: none;
  }
}
:deep(.el-dialog) {
  .el-dialog__title {
    float: left;
  }
  .operation-btns {
    text-align: left;
  }
}
</style>
